You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Expected behavior: A Data Connector-backed Select List keeps its selected label, loaded options, and scalar screen-data value when switching between desktop and mobile widths.
Actual behavior: Crossing the 480 px breakpoint updated the structural screen definition, rebuilt the generated screen, remounted the Select List, and repeated its ListAll request. The selected scalar value remained in screen data, but its label disappeared while options reloaded.
Reproduction:
Configure a Select List to load options from a Data Connector.
Select an option in desktop preview.
Switch to mobile preview at 480 px, then return to desktop preview.
Observe the selection and Data Connector requests.
Solution
Keep responsive state reactive and independent from the structural screen definition so breakpoint changes do not rebuild the generated screen.
Propagate the responsive state through Screen Renderer, loops, dynamic panels, nested screens, Record Lists, and collection controls.
Update device visibility and validation rules from reactive state while preserving the existing structural rebuild behavior for configuration changes.
Observe each renderer's own container and coalesce resize updates to prevent ResizeObserver loops.
Add a deterministic Cypress regression with a delayed mocked Data Connector response that verifies selection state, options, component identity, visibility rules, responsive validation recalculation, and a single ListAll request.
How to Test
Configure a Data Connector-backed Select List and select an option.
Add an empty required field that is visible only on desktop.
Switch desktop -> mobile at 480 px -> desktop.
Confirm the selected label, available options, and scalar screen-data value remain unchanged.
Confirm the screen changes from invalid -> valid -> invalid as the required field becomes hidden and visible again.
Confirm desktop/mobile visibility rules toggle and the Data Connector does not execute again.
Screen Builder dist copied into ProcessMaker Core and npm run dev: passed.
Manual screen 64 verification preserved the same Select List DOM node across desktop -> mobile -> desktop with zero additional ListAll requests.
Local toolchain notes:
Jest completed 60 passing assertions, but 7 suites are blocked before execution by the repository's existing Vue/ES module transform configuration.
npm run lint cannot start because vue-cli-service is not installed by the current package manifest; direct ESLint also reports existing repository-wide lint debt.
I reran the failed checks, but these failures are unrelated to the changes in this PR. The same intermittent Cypress/Vite issue has occurred in other Screen Builder PRs, where the app sometimes does not render and tests time out waiting for common UI elements. This CI stability issue should be addressed in a separate ticket outside the scope of this PR, so please disregard these failed checks when merging the changes here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
CarliPinell
left a comment
Issue & Reproduction Steps
Expected behavior: A Data Connector-backed Select List keeps its selected label, loaded options, and scalar screen-data value when switching between desktop and mobile widths.
Actual behavior: Crossing the 480 px breakpoint updated the structural screen definition, rebuilt the generated screen, remounted the Select List, and repeated its
ListAllrequest. The selected scalar value remained in screen data, but its label disappeared while options reloaded.Reproduction:
Solution
ListAllrequest.How to Test
Validation completed:
LoopSelectList.spec.js: 3 passing, including responsive invalid -> valid -> invalid coverage.DeviceVisivilityInspector.spec.js: 22 passing.VisibilityRule.spec.js: 3 passing.npm run build-bundle: passed.distcopied into ProcessMaker Core andnpm run dev: passed.ListAllrequests.Local toolchain notes:
npm run lintcannot start becausevue-cli-serviceis not installed by the current package manifest; direct ESLint also reports existing repository-wide lint debt.Related Tickets & Packages
vue-form-elementschanges were required.ci:deploy